<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			
			.mui-input-group {
				margin-top: 10px;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 22%;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin-top: 25px;
			}
			
			.mui-btn {
				padding: 10px;
			}
			
			.link-area {
				display: block;
				margin-top: 25px;
				text-align: center;
			}
			
			.spliter {
				color: #bbb;
				padding: 0px 8px;
			}
			
			.oauth-area {
				position: absolute;
				bottom: 20px;
				left: 0px;
				text-align: center;
				width: 100%;
				padding: 0px;
				margin: 0px;
			}
			
			.oauth-area .oauth-btn {
				display: inline-block;
				width: 50px;
				height: 50px;
				background-size: 30px 30px;
				background-position: center center;
				background-repeat: no-repeat;
				margin: 0px 20px;
				/*-webkit-filter: grayscale(100%); */
				border: solid 1px #ddd;
				border-radius: 25px;
			}
			
			.oauth-area .oauth-btn:active {
				border: solid 1px #aaa;
			}
			
			.oauth-area .oauth-btn.disabled {
				background-color: #ddd;
			}
			/*----------------mui.showLoading---------------*/
			.mui-show-loading {
				position: fixed;
				padding: 5px;
				width: 120px;
				min-height: 120px;
				top: 45%;
				left: 50%;
				margin-left: -60px;
				background: rgba(0, 0, 0, 0.6);
				text-align: center;
				border-radius: 5px;
				color: #FFFFFF;
				visibility: hidden;
				margin: 0;
				z-index: 2000;

				-webkit-transition-duration: .2s;
				transition-duration: .2s;
				opacity: 0;
				-webkit-transform: scale(0.9) translate(-50%, -50%);
				transform: scale(0.9) translate(-50%, -50%);
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
			}
			.mui-show-loading.loading-visible {
				opacity: 1;
				visibility: visible;
				-webkit-transform: scale(1) translate(-50%, -50%);
				transform: scale(1) translate(-50%, -50%);
			}
			.mui-show-loading .mui-spinner{
				margin-top: 24px;
				width: 36px;
				height: 36px;
			}
			.mui-show-loading .text {
				line-height: 1.6;
				font-family: -apple-system-font,"Helvetica Neue",sans-serif;
				font-size: 14px;
				margin: 10px 0 0;
				color: #fff;
			}

			.mui-show-loading-mask {
				position: fixed;
				z-index: 1000;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
			}
			.mui-show-loading-mask-hidden{
				display: none !important;
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">登录</h1>
		</header>
		{{$message}}}
		<div class="mui-content">
			<form id='login-form' method="post" class="mui-input-group">
				<div class="mui-input-row">
					<label>账号</label>
					<input id='account' name="account" type="text" class="mui-input-clear mui-input" placeholder="请输入账号(手机/邮箱)">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input id='password' name="password" type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
				</div>
			</form>

			<div class="mui-content-padded">
				<button id='login'  class="mui-btn mui-btn-block mui-btn-primary">登录</button>
				<div class="link-area"><a href="reg.html" id='reg'>注册账号</a> <span class="spliter"></a>
				</div>
			</div>
			<div id="bottom" style="text-align: center;  position:absolute; bottom:0;width:100%; height: 30px;">
				<p>(c) Copyright 2018 maxun.xyz. All Rights Reserved.</p>
			</div>
		</div>
		<script src="js/jquery-1.8.3.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.enterfocus.js"></script>
		<script src="js/app.js"></script>
		<script>
            //获取url中的参数
            function getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg); //匹配目标参数
                if (r != null) return unescape(r[2]); return null; //返回参数值
            }
          /*  $(function () {
				if(1==getUrlParam("flag")){
				    alert("注册成功,请登录！")
				}
            })*/
            $("#login").click(function () {
                var check=true;
                mui("#login-form input").each(function() {
                    //若当前input为空，则alert提醒
                    if(!this.value || this.value.trim() == "") {
                        var label = this.previousElementSibling;
                        mui.alert(label.innerText + "不允许为空");
                        check = false;
                        return false;
                    }
                }); //校验通过，继续执行业务逻辑
                if(check){
                    mui.showLoading("正在加载..","div");
                    $.post("../controller/UserController.php/?action=login",{account:$("#account").val(),password:$("#password").val(),codeId:getUrlParam("codeId")},function(data,status){
                        if(JSON.parse(data).message=="success"){
                            mui.hideLoading(function () {
                                mui.alert('登陆成功',function () {
                                    window.location.href="main.html?id="+JSON.parse(data).id;
                                });
                            });

                        }else{
                            mui.hideLoading();
                            mui.alert("账号或者密码不正确")
                            // window.location.reload();
                        }
                    });
                }

            });
            //扩展mui.showLoading
            (function($, window) {
                //显示加载框
                $.showLoading = function(message,type) {
                    if ($.os.plus && type !== 'div') {
                        $.plusReady(function() {
                            plus.nativeUI.showWaiting(message);
                        });
                    } else {
                        var html = '';
                        html += '<i class="mui-spinner mui-spinner-white"></i>';
                        html += '<p class="text">' + (message || "数据加载中") + '</p>';

                        //遮罩层
                        var mask=document.getElementsByClassName("mui-show-loading-mask");
                        if(mask.length==0){
                            mask = document.createElement('div');
                            mask.classList.add("mui-show-loading-mask");
                            document.body.appendChild(mask);
                            mask.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault();});
                        }else{
                            mask[0].classList.remove("mui-show-loading-mask-hidden");
                        }
                        //加载框
                        var toast=document.getElementsByClassName("mui-show-loading");
                        if(toast.length==0){
                            toast = document.createElement('div');
                            toast.classList.add("mui-show-loading");
                            toast.classList.add('loading-visible');
                            document.body.appendChild(toast);
                            toast.innerHTML = html;
                            toast.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault();});
                        }else{
                            toast[0].innerHTML = html;
                            toast[0].classList.add("loading-visible");
                        }
                    }
                };

                //隐藏加载框
                $.hideLoading = function(callback) {
                    if ($.os.plus) {
                        $.plusReady(function() {
                            plus.nativeUI.closeWaiting();
                        });
                    }
                    var mask=document.getElementsByClassName("mui-show-loading-mask");
                    var toast=document.getElementsByClassName("mui-show-loading");
                    if(mask.length>0){
                        mask[0].classList.add("mui-show-loading-mask-hidden");
                    }
                    if(toast.length>0){
                        toast[0].classList.remove("loading-visible");
                        callback && callback();
                    }
                }
            })(mui, window);

            $(window).resize(function(){
                var h_doc = $(document).height();
                var h_foo = h_doc-25;
                $('#bottom').offset({top:h_foo,left:0});
            });
		</script>
		<script src="https://s13.cnzz.com/z_stat.php?id=1273362290&web_id=1273362290" language="JavaScript"></script>
	</body>

</html>